<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投诉工单数据分析</title>
    <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="./index.css">
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div>
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time" class="layui-input" placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region" lay-filter="region" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <!--  -->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div>
                    <label class="layui-form-label">一级分类：</label>
                    <div class="layui-input-block">
                        <select class="classJson" id="classJson1" data-level='1' lay-filter="classJson"
                            lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">二级分类：</label>
                    <div class="layui-input-block">
                        <select class="classJson" id="classJson2" data-level='2' lay-filter="classJson"
                            lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">三级分类：</label>
                    <div class="layui-input-block">
                        <select class="classJson" id="classJson3" data-level='3' lay-filter="classJson"
                            lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>

                <button type="button" class="layui-btn" onclick="getData()">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial()">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list">
                <div class="order_item">
                    <div class="order_item_title">工单总数</div>
                    <div class="order_item_num">
                        <p><span class="all">0</span>条</p>
                    </div>
                </div>
                <div class="order_item flex-grow">
                    <div class="order_item_title">数据概览</div>
                    <div class="order_number">
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">待分配</div>
                                <div class="order_number_num status1">0</div>
                            </a>
                        </div>
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">已分配</div>
                                <div class="order_number_num status2">0</div>
                            </a>
                        </div>
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">处理中</div>
                                <div class="order_number_num status3">0</div>
                            </a>
                        </div>
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">已完成待评价</div>
                                <div class="order_number_num status4">0</div>
                            </a>
                        </div>
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">已关闭</div>
                                <div class="order_number_num status5">0</div>
                            </a>
                        </div>
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">超时工单</div>
                                <div class="order_number_num time_out">0</div>
                            </a>
                        </div>
                        <div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">非正常关闭</div>
                                <div class="order_number_num close">0</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order_list">
                <div class="order_item flex-grow">
                    <div class="order_item_title">分类数据概览</div>
                    <div class="order_number order_number2">

                    </div>
                </div>
            </div>
            <!--  -->
            <div class="order_list">
                <div class="order_echarts">
                    <div class="order_item_title">数据概览</div>
                    <div class="order_item_echarts mt30">
                        <div id="main" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
                <div class="order_echarts">
                    <div class="order_item_title">分类数据概览</div>
                    <div class="order_item_echarts mt30">
                        <div id="main2" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="./index.js"></script>
<script>
    var laydate = layui.laydate;
    laydate.render({
        elem: '#test-range',
        range: ['#start_time', '#end_time']
    });

    getData()
    let echartsData = []

    // 联动数据
    getJson(3)
    // 搜索
    function getData() {
        $.ajax({
            type: 'post',
            url: 'http://xdwy-develop.huijik.com/base/type_work_order_data',
            data: {
                work_order_type: 3,
                start_time: $('#start_time').val(),
                end_time: $('#end_time').val(),
                project_id: $('#project_id').val(),
                region_id: $('#region').val(),
                work_order_type_id: getLastClassJsonId()
            },
            dataType: 'json',
            success: function (res) {
                data = res.data
                $('.all').html(data.all)
                $('.status1').html(data.status1)
                $('.status2').html(data.status2)
                $('.status3').html(data.status3)
                $('.status4').html(data.status4)
                $('.status5').html(data.status5)

                $('.close').html(data.close)
                $('.time_out').html(data.time_out)

                $(".order_number2").html('')
                echartsData = []
                for (let i in data.work_order_class_data) {
                    echartsData.push({
                        value: data.work_order_class_data[i],
                        name: i
                    })
                    $(".order_number2").append(`<div class="order_number_item">
                            <a href="#">
                                <div class="order_number_title">${i || '空'}</div>
                                <div class="order_number_num">${data.work_order_class_data[i]}</div>
                            </a>
                        </div>`)
                }

                echartsInit()
            }
        })
    }

    // echarts初始化
    function echartsInit() {
        var myChart = echarts.init(document.getElementById('main'));
        var myChart2 = echarts.init(document.getElementById('main2'));

        var option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} {d}%'
                        },
                        labelLine: {
                            show: true
                        }
                    }
                },
                data: [{
                    value: data.status1,
                    name: '待分配'
                }, {
                    value: data.status2,
                    name: '已分配'
                }, {
                    value: data.status3,
                    name: '处理中'
                }, {
                    value: data.status4,
                    name: '已完成待评价'
                }, {
                    value: data.status5,
                    name: '已关闭'
                }, {
                    value: data.time_out,
                    name: '超时工单'
                }, {
                    value: data.close,
                    name: '非正常关闭'
                }]
            }]
        };

        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                left: 'center'
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} {d}%'
                        },
                        labelLine: {
                            show: true
                        }
                    }
                },
                data: echartsData
            }]
        };

        myChart.setOption(option1);
        myChart2.setOption(option2);
    }

    // 重置
    function initial() {
        $('#start_time').val('')
        $('#end_time').val('')
        $('#project_id').val('')
        $('#region').val('')
        $(".classJson").val('')

        upload()
    }
</script>

</html>